import 'package:flutter/material.dart';
import 'package:terminal_flutter_demo/pages/button_type_page.dart';
import 'package:terminal_flutter_demo/pages/card_circle_aspect_page.dart';
import 'package:terminal_flutter_demo/pages/column_row_page.dart';
import 'package:terminal_flutter_demo/pages/grid_view_page.dart';
import 'package:terminal_flutter_demo/pages/list_view_page.dart';
import 'package:terminal_flutter_demo/pages/stack_align_page.dart';
import 'package:terminal_flutter_demo/pages/wrap_page.dart';
import 'package:terminal_flutter_demo/widgets/my_keep_alive_wrapper.dart';

class TabBarViewPage extends StatefulWidget {
  TabBarViewPage({Key? key}) : super(key: key) {}

  @override
  _TabBarViewPageState createState() => _TabBarViewPageState();
}

// mixin实现类似多继承功能（TickerProviderStateMixin）
class _TabBarViewPageState extends State<TabBarViewPage>
    with TickerProviderStateMixin {
  static final tabOptions = <Map>[
    {'text': '关注', 'widget': ListViewResPage()},
    {'text': '推荐', 'widget': MyKeepAliveWrapper(child: GridViewPage())},
    {
      'text': '视频',
      'widget': MyKeepAliveWrapper(
        keepAlive: false,
        child: ColumnRowPage(),
      )
    },
    {'text': '新闻', 'widget': const MyKeepAliveWrapper(child: StackAlignPage())},
    {'text': '体育', 'widget': CardCircleAspect()},
    {'text': '娱乐', 'widget': const WrapPage()},
    {'text': '搞笑', 'widget': const ButtonTypePage()},
    {'text': '关注1', 'widget': ListViewResPage()},
    {'text': '推荐1', 'widget': GridViewPage()},
    {'text': '视频1', 'widget': ColumnRowPage()},
    {'text': '新闻1', 'widget': const StackAlignPage()},
    {'text': '体育1', 'widget': CardCircleAspect()},
    {'text': '娱乐1', 'widget': const WrapPage()},
    {'text': '搞笑1', 'widget': const ButtonTypePage()},
  ];

  get tabs {
    List<Widget> list = [];
    for (var item in tabOptions) {
      list.add(Tab(
        child: Text(
          item['text'],
        ),
      ));
    }
    return list;
  }

  get tabBarViews {
    List<Widget> list = [];
    for (var item in tabOptions) {
      list.add(item['widget']);
    }
    return list;
  }

  late TabController _tabController;

  @override
  void initState() {
    super.initState();

    _tabController = TabController(
      length: tabOptions.length,
      vsync: this, // this须实现mixin类 TickerProviderStateMixin
    );

    _tabController.addListener(() {
      // print('_tabController change: ${_tabController.index}'); // 会执行两次
      if (_tabController.animation?.value == _tabController.index) {
        print('_tabController change: ${_tabController.index}');
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    // 销毁监听
    _tabController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Column(
        children: [
          TabBar(
            controller: _tabController,
            isScrollable: true,
            indicator: const BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.all(
                Radius.circular(8),
              ),
            ),
            labelColor: Colors.white,
            unselectedLabelColor: Colors.black,
            // indicatorSize: TabBarIndicatorSize.label,
            tabs: tabs,
            onTap: (value) {
              print('TabBar onTap: $value');
            },
          ),
          Expanded(
            child: TabBarView(
              controller: _tabController,
              children: tabBarViews,
            ),
          ),
        ],
      ),
    );
  }
}
